<template>
  <div class="row">
    <transition-group
        name="animate__animated animate__bounce"
        enter-active-class="animate__backInUp"
        leave-active-class="animate__backOutDown"
    >
    <!-- 展示用户列表-->
    <div v-show="info.users.length" class="card" v-for="user in info.users" :key="user.id">
      <a href="user.html_url" target="_blank">
        <img src="user.avatar_url" style='width: 100px'/>
      </a>
      <p class="card-text">{{ user.login }}</p>
    </div>
    </transition-group>
    <!--展示欢迎词-->
    <h1 v-show="info.isFirst">Welcome</h1>
    <!--展示加载中-->
    <h1 v-show="info.isLoading">loading...</h1>
    <!--展示错误信息-->
    <h1 v-show="info.errMsg">{{info.errMsg}}</h1>
    <h1 v-show="info.users.length <= 0">You did not find what you want</h1>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
import 'animate.css'

export default {
  name: "List",
  data(){
    return{
     info: {
       users: [],
       isFirst: true,
       isLoading: false,
       errMsg: ''
     }
    }
  },
  methods:{
    updateListData(_,dataObj) {
      console.log('消息订阅成功！',dataObj);
      this.info = {...this.info,...dataObj}
    }
  },
  mounted(){
    //消息订阅
    //这个组件需要数据所以把回调留在这里
    this.pubId = pubsub.subscribe('updateListData',this.updateListData)
    //全局事件总线
    // this.$bus.$on('updateListData',(dataObj) => {
    //   this.info = {...this.info,...dataObj}
    // })
  },
  beforeDestroy() {
   pubsub.unsubscribe(this.pubId)
  }
}
</script>

<style scoped>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}

</style>